@charset "utf8";
/* 页头 */
header{
	/* 页面宽度固定 */
	width: 1260px;
	height: 43px;
	/* 切片：大范围 */
	background: #333333;
}
    /* 切片：小范围 */
	/* 中控区：决定内容显示 */
	header div#wrapper{
		width: 1104px;
	    height: 43px;
	    ba ckground: #e5ffd3;
		/* 外边距居中 */
		margin: 0 auto;
	}
	/* 页面左侧 */
	header div#wrapper div.head_left{
		width: 630px;
		height: 43px;
		bac kground: #f1cba9;
		float: left;
	}
	/* 页面右侧 */
	header div#wrapper div.head_right{
		width: 300px;
		height: 43px;
		bac kground: #f1cba9;
		float: right;
	}
    
	/* 找最后一个导航选项，去掉竖线 */
	header div#wrapper div.head_left ul li a.c{
		border: 0;
	}
	
	
	/* -------右侧-------------------------------------------------- */
	/* 右侧位：内容右浮动 */
	header div#wrapper div.head_right ul li{
		float: right;
	}
	/* 竖线 */
	header div#wrapper div.head_right ul li a{
		border-left: 1px solid #424242;
		padding: 0 5px;
	}
	header div#wrapper div.head_right ul li.d a,header div#wrapper div.head_right ul li a.d{
		border: 0;
	}
	/* 找右侧购物车加宽，上背景色 */
	header div#wrapper div.head_right ul li.li_right{
		width: 120px;
		background: #424242;
		padding-left: 25px;
	}
	/* 加精灵图 */
	header div#wrapper div.head_right ul li.li_right i.shop{
		bor der: 1px solid red;
		/* 撕开口：行内元素，左右口 */
		padding: 0 10px;
		/* 图片没有导入 */
		background: url(../img/buy.png);
		background-size: 100% 95%;
	}
	header div#wrapper div.head_right ul div.shop_out{
		width: 270px;
		height: 90px;
		background: #fff;
		position: absolute;
		top: 43px;
		left: 912px;
		display: none;
	}
	/* 难题：光标移动到购物车区域【背景色先变色，然后立马文本变色，同时精灵图改变】 */
	header div#wrapper div.head_right ul li.li_right:hover{
		background: #ffffff;
	}
	header div#wrapper div.head_right ul li.li_right:hover a.d{
		color: #ff6700;
	}
	header div#wrapper div.head_right ul li.li_right:hover i.shop{
		background: url(../img/buy01.png);
		background-size: 100% 95%;
	}
	